<ng-container *ngIf="workflowFlatSchema && jobFlatSchema && data">
    <div class="leftPanel">
        <app-graph [navigationDisabled]="true" [workflow]="dataGraph" (onSelectJob)="selectJob($event)"
            (onSelectHook)="selectHook($event)"></app-graph>
        <div class="jobForm" *ngIf="selectedJob || selectedHook">
            <app-entity-json-form *ngIf="selectedHook" [class.disableSelection]="resizing" [disabled]="resizing"
                [parentType]="parentType" [entityType]="'Workflow'" [schema]="workflowFlatSchema" [data]="data"
                (dataChange)="onFormChange($event)"></app-entity-json-form>
            <app-entity-json-form *ngIf="selectedJob" [class.disableSelection]="resizing" [disabled]="resizing"
                [parentType]="'V2Job'" [entityType]="actionEntity" [schema]="jobFlatSchema" [data]="jobForm"
                (dataChange)="onFormChange($event)"></app-entity-json-form>
            <button class="back" nz-button nzType="default"
                (click)="selectedJob = undefined;selectedHook = undefined">Return to
                workflow</button>
        </div>
    </div>
    <app-resizable-panel minSize="400" [initialSize]="panelSize" (onGrabbingStart)="panelStartResize()"
        (onGrabbingEnd)="panelEndResize($event)">
        <nz-alert *ngIf="syntaxErrors?.length > 0" nzType="error" [nzMessage]="syntaxErrorTmpl">
            <ng-template #syntaxErrorTmpl>
                <ul>
                    <li *ngFor="let e of syntaxErrors">
                        {{e}}
                    </li>
                </ul>
            </ng-template>
        </nz-alert>
        <nz-tabset nzType="card" nzSize="small">
            <nz-tab [nzTitle]="path"></nz-tab>
        </nz-tabset>
        <nz-code-editor #editor [ngModel]="dataEditor" [nzEditorOption]="editorOption"
            (ngModelChange)="onEditorChange($event)" (nzEditorInitialized)="onEditorInit($event)"></nz-code-editor>
    </app-resizable-panel>
</ng-container>